<template>
  <v-container>
    <v-row>
      <v-col cols="2">
        <v-sheet rounded="lg">
          <v-list color="transparent" nav>
            <v-list-item-group
              color="primary"
            >
              <v-list-item
                v-for="(link,i) in links"
                :key="i"
                link
                @click="handleClick(link)"
              >
                <v-list-item-content>
                  <v-list-item-title>
                    {{ link.title }}
                  </v-list-item-title>
                </v-list-item-content>
              </v-list-item>

              <v-divider class="my-2"></v-divider>

              <v-list-item
                link
              >
                <v-list-item-content>
                  <v-list-item-title>
                    Refresh
                  </v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list-item-group>
          </v-list>
        </v-sheet>
      </v-col>

      <v-col cols="10">
        <v-sheet
          min-height="70vh"
          rounded="lg"
        >
          <div style='padding: 10px' v-show="showComponent==='ry_dialog'">
            <v-btn depressed
                   color="primary"
                   block
                   @click="ryDialog=true">
              打开弹窗
            </v-btn>
            <draggable-dialog :visible.sync="ryDialog"></draggable-dialog>
          </div>
          <div class="ry_elform" style='padding: 10px' v-show="showComponent==='ry_elform'">
            <v-btn
              class="mb-2"
              color="secondary"
              block
            >
              表单inline样式重写
            </v-btn>
            <div>
              <el-form :inline="true" :model="elFrom" class="demo-form-inline">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="事故名称">
                      <el-input v-model="elFrom.v1" placeholder="事故名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="事故类型">
                      <el-input v-model="elFrom.v2" placeholder="事故类型"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="事故等级">
                      <el-input v-model="elFrom.v3" placeholder="事故等级"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="8">
                    <el-form-item label="事发时间起">
                      <el-date-picker
                        v-model="elFrom.v4"
                        type="datetime"
                        placeholder="选择日期时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="事发时间止">
                      <el-date-picker
                        v-model="elFrom.v5"
                        type="datetime"
                        placeholder="选择日期时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="事发企业">
                      <el-input v-model="elFrom.v6" placeholder="事发企业"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
          <div class="ry_eltable" style='padding: 10px' v-show="showComponent==='ry_eltable'">
            <v-btn
              class="mb-2"
              color="secondary"
              block
            >
              表格样式重写
            </v-btn>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                prop="date"
                label="日期"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                width="180">
              </el-table-column>
              <el-table-column
                prop="address"
                label="地址">
              </el-table-column>
            </el-table>
          </div>
          <div class="ry_pagination" style='padding: 10px' v-show="showComponent==='ry_pagination'">
            <v-btn
              class="mb-2"
              color="secondary"
              block
            >
              分页样式重写
            </v-btn>
            <el-pagination
              class="el_pagination_reset1"
              background
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, ->, prev, pager, next"
              :total="1000">
            </el-pagination>
          </div>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import DraggableDialog from '@/components/draggableDialog/DraggableDialog'

export default {
  name: 'Home',
  components: { DraggableDialog },
  data () {
    return {
      showComponent: 'ry_dialog',
      links: [
        {
          title: '弹窗',
          show: 'ry_dialog'
        },
        {
          title: '饿了么表单',
          show: 'ry_elform'
        },
        {
          title: '饿了么表格',
          show: 'ry_eltable'
        },
        {
          title: '饿了么分页',
          show: 'ry_pagination'
        }
      ],
      ryDialog: false,

      // 表单 START
      elFrom: {
        v1: '',
        v2: '',
        v3: '',
        v4: '',
        v5: '',
        v6: ''
      },
      // 表单 END

      // 表格START
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
      // 表格END
    }
  },
  methods: {
    handleClick (item) {
      console.log(item)
      this.showComponent = item.show
    }
  }
}
</script>
<style>

/*inline 表格样式格式化 START*/
.ry_elform .el-form-item {
  display: flex;
  width: 100%;
}

.ry_elform .el-form-item__label {
  width: 100px;
  max-width: 100px;
}

.ry_elform .el-form-item__content {
  flex: 1;
}

.ry_elform .el-form-item__content > div {
  width: 100%;
}

/*inline 表格样式格式化 END*/

/*表格样式重写 START*/
.ry_eltable .el-table,
.ry_eltable .el-table__expanded-cell,
.ry_eltable .el-table tr,
.ry_eltable .el-table th {
  background-color: transparent;
  color: #323232;
  font-size: 1.2vh;
}

/*表格底部 以及表格设置height时合计兼容性*/
.ry_eltable .el-table {
  overflow: visible;
  /*border-bottom: 1px solid #1F4E6F;*/
}

/*表格底部 合计*/
.ry_eltable .el-table__footer-wrapper tbody td,
.ry_eltable .el-table__header-wrapper tbody td {
  background-color: transparent;
  color: #323232;
  border-top: none;
}

/*行默认的底部边框*/
.ry_eltable .el-table td,
.ry_eltable .el-table th.is-leaf {
  /*border-bottom: none;*/
  border-bottom-color: #EAEAEA;
}

.ry_eltable .el-table--group::after,
.ry_eltable .el-table--border::after,
.ry_eltable .el-table::before {
  height: 0;
}

/*行hover背景色*/
.ry_eltable .el-table--enable-row-hover .el-table__body tr:hover > td {
  /*background-color: rgba(95, 213, 253, 0.1);*/
}

/*表格头*/
.ry_eltable .el-table__header-wrapper {
  height: 3.61vh;
  border-bottom: 1px solid #EAEAEA;
}

.ry_eltable .el-table td, .ry_eltable .el-table th {
  padding: 0;
}

/*表格头单元格样式*/
.ry_eltable .el-table th > .cell {
  line-height: 3.61vh;
  height: 3.61vh;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ry_eltable .el-table .cell {
  line-height: 3vh;
  height: 3vh;
}

/*.ry_eltable thead tr {*/
/*  height: 3.61vh;*/
/*}*/
/*表格样式重写 END*/

/*分页 START*/
.el_pagination_reset1.el-pagination.is-background .btn-next,
.el_pagination_reset1.el-pagination.is-background .btn-prev,
.el_pagination_reset1.el-pagination.is-background .el-pager li {
  background-color: white;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
  height: 2.6vh;
  min-width: 2.6vh;
  line-height: 2.6vh;
  padding: 0;
}

/*可以控制total 和size选择*/
.el_pagination_reset1.el-pagination button, .el_pagination_reset1.el-pagination span:not([class*=suffix]),
.el_pagination_reset1 .el-input,
.el_pagination_reset1 .el-input .el-input__inner {
  height: 2.6vh;
  line-height: 2.6vh;
  padding-bottom: 1px;
}

/*分页下拉箭头*/
.el_pagination_reset1.el-pagination .el-input__icon {
  line-height: 2.6vh;
}

/*分页 END*/
</style>
